"use client"

import { useState } from "react"
import { Sidebar } from "@/components/layout/sidebar"
import { Header } from "@/components/layout/header"
import { MotorControlDashboard } from "@/components/motor-control/motor-control-dashboard"
import { MotorProjectList } from "@/components/projects/motor-project-list"
import ProjectCreateForm from "@/components/projects/project-create-form"
import { MotorProjectDetail } from "@/components/projects/motor-project-detail"

export default function MotorControlSystem() {
  const [currentView, setCurrentView] = useState("dashboard")
  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null)

  const renderCurrentView = () => {
    switch (currentView) {
      case "dashboard":
        return <MotorControlDashboard />
      case "projects":
        return <MotorProjectList onSelectProject={setSelectedProjectId} onCreateProject={() => setCurrentView("create-project")} />
      case "project-detail":
        return selectedProjectId ? (
          <MotorProjectDetail projectId={selectedProjectId} onBack={() => setCurrentView("projects")} />
        ) : (
          <MotorProjectList onSelectProject={setSelectedProjectId} onCreateProject={() => setCurrentView("create-project")} />
        )
      case "create-project":
        return (
          <div className="max-w-4xl mx-auto">
            <ProjectCreateForm 
              onCreateProject={(data) => {
                console.log("Creating project:", data)
                setCurrentView("projects")
              }} 
            />
          </div>
        )
      case "team":
        return (
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <h2 className="text-xl font-semibold mb-2">团队管理</h2>
              <p className="text-gray-500">功能开发中...</p>
            </div>
          </div>
        )
      case "reports":
        return (
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <h2 className="text-xl font-semibold mb-2">报告分析</h2>
              <p className="text-gray-500">功能开发中...</p>
            </div>
          </div>
        )
      case "documents":
        return (
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <h2 className="text-xl font-semibold mb-2">文档中心</h2>
              <p className="text-gray-500">功能开发中...</p>
            </div>
          </div>
        )
      case "notifications":
        return (
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <h2 className="text-xl font-semibold mb-2">通知中心</h2>
              <p className="text-gray-500">功能开发中...</p>
            </div>
          </div>
        )
      case "settings":
        return (
          <div className="flex items-center justify-center h-64">
            <div className="text-center">
              <h2 className="text-xl font-semibold mb-2">系统设置</h2>
              <p className="text-gray-500">功能开发中...</p>
            </div>
          </div>
        )
      default:
        return <MotorControlDashboard />
    }
  }

  return (
    <div className="flex h-screen bg-gray-50">
      {/* 侧边栏 */}
      <Sidebar 
        onNavigate={(view) => {
          setCurrentView(view)
          if (view !== "project-detail") {
            setSelectedProjectId(null)
          }
        }}
        currentView={currentView}
      />
      
      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* 顶部工具栏 */}
        <Header />
        
        {/* 主内容 */}
        <main className="flex-1 overflow-y-auto p-6">
          {renderCurrentView()}
        </main>
      </div>
    </div>
  )
}